<!--
 * @Description:
 * @Version: 1.0
 * @Author: liguansheng
 * @Date: 2022-08-17 13:06:49
 * @LastEditors: liguansheng
 * @LastEditTime: 2022-08-25 15:54:16
-->
<template>
  <div>
    <AppSearchForm
      v-model:filter="filter"
      @handle-search="handleSearch"
      @handle-add="handleOpenDialog"
      @handle-clear="handleClear"
    />
    <PaginationCard
      v-model:currentPage="paginationData.currentPage"
      v-model:pageSize="paginationData.pageSize"
      :load-list="getTableData"
      :total="paginationData.total"
    >
      <AppTable
        v-loading="isLoading"
        :data="tableData"
        :columns="columns"
        border
      />
    </PaginationCard>
    <apiScopeDialog
      v-model:visible="visible"
      v-model:editId="editId"
      @success="handleSuccess"
    />
  </div>
</template>

<script setup lang="tsx">
import { onMounted, reactive, ref } from 'vue'
import AppSearchForm from '@/components/AppSearchForm/index.vue'
import PaginationCard from '@/components/PaginationCard/index.vue'
import AppTable from '@/components/AppTable/index.vue'
import AppButtonGroup from '@/components/AppButtonGroup/index.vue'
import apiScopeDialog from './apiScopeDialog.vue'
import type { IButtonConfig } from '@/components/AppButtonGroup/type'
import { deleteApiScope, pagedApiScopes } from '@/http/apiScope'
import { ElMessageBox } from 'element-plus'
import { IApiScope } from '@/http/types/apiScope'

const buttonConfig:IButtonConfig[] = [
  {
    name: '修改',
    eventName: 'handleEdit',
    type: 'primary'
  },
  {
    name: '删除',
    eventName: 'handleDelete',
    type: 'primary'
  }
]
const columns = ref([
  { label: '名称', prop: 'name' },
  { label: '显示名称', prop: 'displayName' },
  { label: '描述', prop: 'description' },
  {
    label: '操作',
    fixed: 'right',
    render: ({ row }:{row:IApiScope}) => {
      return <AppButtonGroup
        rowData={row}
        buttonConfigs={ buttonConfig }
        onEvent={(eventName:string) => {
          eventName === 'handleEdit' && handleEdit(row)
          eventName === 'handleDelete' && handleDelete(row)
        }}
      >
      </AppButtonGroup>
    }
  }
])

const editId = ref('')
const handleEdit = (identityResource: IApiScope) => {
  editId.value = identityResource.id
  visible.value = true
}
const handleDelete = (apiResource: IApiScope) => {
  ElMessageBox.confirm(
    '删除该ApiScope, 是否继续?',
    '提示',
    {
      confirmButtonText: '是',
      cancelButtonText: '否',
      type: 'warning'
    }
  )
    .then(async () => {
      await deleteApiScope(apiResource.id)
      await getTableData()
    })
}
const handleSuccess = () => {
  visible.value = false
  handleSearch()
}

const paginationData = reactive({
  pageSize: 10,
  currentPage: 1,
  total: 0
})

const filter = ref('')
const handleSearch = () => {
  paginationData.currentPage = 1
  getTableData()
}
const visible = ref(false)
const handleOpenDialog = () => {
  visible.value = true
}
const handleClear = () => {
  filter.value = ''
  handleSearch()
}

const isLoading = ref(false)
const tableData = ref<IApiScope[]>([])
const getTableData = async () => {
  isLoading.value = true
  const res = await pagedApiScopes(
    paginationData.currentPage,
    paginationData.pageSize,
    filter.value
  ).finally(() => {
    isLoading.value = false
  })
  tableData.value = res.items
  paginationData.total = res.totalCount
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped lang="scss">

</style>
